(function (window) {
    // 面向对象选项卡
    function Tabs(ele, options = {}) {
        this.options = options
        this.ele = document.querySelector(ele)
        // 在当前选项卡范围内找到
        this.btns = this.ele.querySelectorAll('ul>li')
        this.tabs = this.ele.querySelectorAll('ol>li')
        this.change()
    }
    Tabs.prototype.change = function () {
        let _this = this
        this.btns.forEach(function (item, index) {
            item.addEventListener(_this.options.type || 'click', function () {

                // 每一个tabs和btns都没有类名
                _this.btns.forEach(function (t, i) {
                    t.className = ''
                    _this.tabs[i].className = ''
                })
                // 给当前被选中的状态添加类名item = this
                this.className = 'active'
                _this.tabs[index].className = 'active'
            })
        });
    }
    // 
    window.Tabs = Tabs
})(window)